<template>
  <div class="songListItem">
    <ul class="song-list">
      <li v-for="item in newSongs" :key="item.id" @click="selectMusic(item.id)">
        <img v-lazy="item.picUrl" alt="" class="song-left">
        <div class="song-center">
          <h3>
            {{ item.name }}
          </h3>
          <p>
            {{ item.singer }}
          </p>
        </div>
      </li>
    </ul>
    <p class="footer-text"> - 我也是有底线的 - </p>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "SongListItem",
  props: {
    newSongs: Array,
  },
  methods: {
    ...mapActions([
      "setFullScreen",
      'setMiniPlayer',
      'getSongDetail'
    ]),
    selectMusic(id) {
      this.setFullScreen(true);
      this.setMiniPlayer(false);
      this.getSongDetail([id]);

    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/variable";
@import "../assets/css/mixin";

.song-list {
  @include bg_sub_color();
  @include font_color();

  li {
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 20px;

    .song-left {
      width: 100px;
      border-radius: 50%;
      margin-right: 20px;
    }

    .song-center {
      @include no-wrap();
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      h3 {
        @include font_size($font_large);
      }

      p {
        @include font_size($font_medium);
        opacity: 0.8;
      }
    }
  }
}
</style>
